[HTML5] canvas 요소에 이미지 추가하기

HTML5의 캔버스(canvas) 요소에 이미지를 추가하는 방법에 대하여 알아봅니다. 어떻게하면 이미지를 추가할 수 있을까요? 이미지를 추가하는 것은 가능할까요?

# canvas에 이미지 추가하는 방법

canvas에는 도형을 그리기도 하지만 원하는 이미지를 추가할 수도 있습니다. 이미지를 추가하기 위해서는 drawImage() 함수를 사용합니다.

drawImage(image, x, y);


- image : 추가할 이미지를 가르킴
- x : 좌측으로부터 우측 거리 위치
- y : 상단으로부터 하단 거리 위치
이미지) 예제에 사용할 이미지

! Canvas에 적용한 모습 확인하기

만약 위 이미지를 캔버스에 추가하는 경우 어떻게 나타날까요? x, y값을 각각 100인 경우에 아래처럼 나타나게됩니다.

! Canvas에 이미지 크기를 지정하는 경우

이미지 크기를 다르다면 어떻게할까요? 만약 캔버스에 추가할때 실제 이미지 크기와 다르게 추가하는 경우 아래와 같이 width, height 값을 추가하여 적용이 가능합니다.

drawImage(image, x, y, width, height);


- width : 이미지 width 너비값
- height : 이미지 height 너비값

아래는 width, height를 각각 50으로 추가하였습니다. 어떻게 나타나는지 보세요.

실제 구현한 캔버스 모습입니다.


이 방법으로 이미지 사이즈를 조절할 수 있습니다. 만약 이미지 사이즈뿐만 아니라 이미지의 일부만 가져올 수 도 있습니다.

! 이미지 일부만 Canvas에 가져오기

이미지의 일부(Clipped image)만 가져와 크기를 조절하여 캔버스에 그릴 수 있습니다. 이때는 아래와 같이 옵션을 사용합니다.

ctx.drawImage(img, startX, startY, endX, endY, x, y, sizeX, sizeY)


각각 간단히 설명하자면 ...

- img : 사용할 이미지
- startX : 잘라낼 이미지의 시작점 x
- startY : 잘라낼 이미지의 시작점 y
- endX: 잘라낼 이미지의 마지막 위치 x
- endY : 잘라낼 이미지의 마지막 위치 y
- x : 이미지의 x 좌표값
- y : 이미지의 y 좌표값
- sizeX : 잘라낸 이미지의 x 값 크기
- sizeY : 잘라낸 이미지의 y 값 크기

위 코드를 실행하면 아래와 같이 나타납니다.




보시는 것처럼 이미지의 일부만 잘라내서 100px 크기... 즉 두 배 크기로 캔버스에 그렸습니다. 여기까지는 가장 핵심인 drawImage()를 사용하는 방법에 대하여 자세히 알아보았고 아래는 캔버스에 이미지를 추가하는 예제에 대하여 자세히 알아봅니다.

# 캔버스 영역에 사진 또는 이미지 추가 예제보기

이번에는 직접 캔버스 엘리먼트를 만들고 여기에 이미지를 추가하는 전체 예제를 알아보려합니다. 여기서 알아야할 사항이 있는데 이미지를 추가할 경우 반드시 이미지가 브라우저에서 이미지가 로드되야만 캔버스에 정상적으로 추가됩니다. 그래서 다음과 같이 image 엘리먼트를 하나 만들고 여기에 이미지 경로를 추가하여 로드하는 과정이 필요하죠.

• 1. 임의의 이미지 엘리먼트 생성
• 2. 생성된 엘리먼트에 이미지 경로를 추가하여 로드되도록 함
• 3. 로드 완료시 콜백함수를 실행하도록 이벤트 추가
• 4. 콜백함수에서 로드된 이미지를 drawImage()를 사용해 캔버스에 그리기
• 5. 완료
  

과정은 위와 같습니다. 위 과정들은 하나의 함수로 만들어 사용하면 편하므로 아래처럼 addToCanvas()라는 임의의 함수를 사용하면 편리할 것입니다. 그럼 가장 먼저 캔버스를 만들어보겠습니다.

@ addImage.html

다음은 이미지를 추가하는 스크립트입니다.
@ addImage.js

이제 원하는 이미지를 캔버스에 추가할 수 있습니다. 위와같이 addToCanvas()를 사용하면됩니다. 이 함수는 이미지를 불러와 로딩한 후 로딩이 끝나면 캔버스 영역에 추가하게됩니다.